<template>
  <div>
    <!-- 搜索 -->
    <van-search placeholder="请输入搜索关键词" shape="round" disabled @click="search"/>
    <!-- 轮播图 -->
    <van-swipe @change="changeCurrentIndex" :autoplay="3000">
      <van-swipe-item v-for="(i, k) in bannerData" :key="k">
        <div>
          <img :src="i.bannerImg" alt="" @click="goDetail(i.pid)"/>
        </div>
      </van-swipe-item>
      <template #indicator>
        <div class="custom-indicator">
          <div
            :class="{ active: currentIndex === i }"
            v-for="(v, i) in bannerData.length"
            :key="i"
          ></div>
        </div>
      </template>
    </van-swipe>
    <!-- 立刻下单 -->
    <div class="orderNow">
      <div class="orderNow-box cons" @click="orderNow">
        <div class="orderNow-img"><img src="../assets/img/2.png" alt=""></div>
        <div>现在下单</div>
      </div>
      <div class="orderNow-box" @click="orderNow">
        <div class="orderNow-img"><img src="../assets/img/3.png" alt=""></div>
        <div>请他喝茶</div>
      </div>
    </div>
    <div class="titlebox">每日精品</div>
    <!-- 咖啡列表 -->
    <ul class="milkylist">
        <li v-for="(item,k) in milkylist" :key="k">
            <img :src="item.smallImg" alt="" @click="goDetail(item.pid)">
            <div>
                <span class="milkylist-name">{{item.name}}</span>
                <p>{{item.enname}}</p>
                <div>
                  <span class="milkylist-price">￥{{item.price}}</span>
                  <i @click="goDetail(item.pid)">购买</i>
                </div>
            </div>
        </li>
    </ul>
    <!-- 空盒子 -->
    <div class="kongbox"></div>
  </div>
</template>

<script>
import "../assets/less/home.less";
export default {
  name: "Home",
  data() {
    return {
      //轮播图数据
      bannerData: [],
      currentIndex: 0,
      //精品数据
      milkylist: [],
    };
  },
  created() {
    this.getBannerData();
    this.getmilkylist();
  },
  methods: {
    changeCurrentIndex(index) {
      this.currentIndex = index;
    },

    //获取轮播图
    getBannerData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.axios({
        method: "GET",
        url: this.baseUrl + "/banner",
        params: {
          appkey: this.appkey,
        },
      })
        .then((res) => {
          //   console.log("res=>", res);
          this.$toast.clear();
          if (res.data.code === 300) {
            this.bannerData = res.data.result;
          } else {
            this.$toast({
              message: res.data.msg,
              forbidClick: true,
              duration: 3000,
            });
          }
        })
        .catch((err) => {
          this.$toast.clear();
        //   console.log("err ==>", err);
        });
    },
    //获取精品数据
    getmilkylist() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.axios({
        method: "GET",
        url: this.baseUrl + "/typeProducts",
        params: {
          appkey: this.appkey,
          key: "isHot",
          value: 1,
        },
      }).then((res) => {
        // console.log(res);
        if (res.data.code === 500) {
          this.milkylist = res.data.result;
        } else {
          this.$toast({
            message: res.data.msg,
            forbidClick: true,
            duration: 3000
          });
        }
      });
    },
    goDetail(pid){
      this.$router.push({name: 'Detail', params: {pid}})
    },
    //搜索时触发
    search(){
      this.$router.push({name: 'Search'})
    },
    //搜索时触发
    orderNow(){
      this.$router.push({name: 'Menu'})
    }
  },
};
</script>
